<template>
	<view>
		<Navbar></Navbar>
		<view class="u-m-30">
			<u-time-line>
				<!-- <u-time-line-item nodeTop="2">
					<template v-slot:node>
						<view class="u-node" style="background: #19be6b;">
							<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-title">待取件</view>
							<view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米，左拐约10步，再右拐直走，见一红灯笼停下，叩门三下，喊“芝麻开门”即可。
							</view>
							<view class="u-order-time">2019-05-08 12:12</view>
						</view>
					</template>
				</u-time-line-item> -->
				<u-time-line-item v-for="item in logisticsData" :key="item.id">
					<template v-slot:content>
						<view>
							<view class="u-order-title">{{item.status}}</view>
							<view class="u-order-desc">{{item.context}}</view>
							<view class="u-order-time">{{item.ftime}}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
		<u-empty text="无物流记录" mode="list" v-if="!logisticsData[0]"></u-empty>
		<view style="height: 200rpx;"></view>
		<Bottom :isReturn="true"></Bottom>
	</view>
</template>

<script>
	import {
		teaOrderDetail
	} from '@/network/tea.js'
	import Navbar from '@/components/Navbar.vue'
	import Bottom from '@/components/Bottom.vue'
	export default {
		components: {
			Navbar,
			Bottom
		},
		data() {
			return {
				logisticsData: []
			}
		},
		onLoad(options) {
			this.onGetLogisticsInfo(options.id)
		},
		methods: {
			async onGetLogisticsInfo(id) {
				const res = await teaOrderDetail({
					order_id: id
				})
				let data = res.data.express_info
				if (data.status == '200' & data.message == 'ok') {
					this.logisticsData = data.data
				}
			}
		}
	}
</script>

<style>
	page {
		background-image: none;
		background-color: #fff;
	}
</style>
<style>
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #000;
	}

	.u-order-title {
		font-weight: bold;
		font-size: 34rpx;
	}

	.u-order-desc {
		color: #666;
		font-size: 24rpx;
		margin: 10rpx 0;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}

	.u-time-axis-node {
		background-color: none !important;
	}
</style>